<template>
  <div>
    <div class="child-a" @click="$emit('click')"></div>
    <div class="child-b" @click="clickHandler"></div>
  </div>
</template>

<script>
import {defineComponent} from 'vue';

export default defineComponent({
  name: 'CustomizeEventChildren',
  // 字符串数组声明emits，无法进行事件参数校验
  // emits: ['click', 'clickEventB'],

  // 对象声明emits
  emits: {
    click: null, // 无校验
    clickEventB: (str, arr) => { // 参数校验
      console.log('参数校验', str, arr); // string ['A', 'B']
      return true;
    }
  },
  methods: {
    clickHandler() {
      // 参数event为事件名称，其后参数均为事件参数
      this.$emit('clickEventB', 'string', ['A', 'B']);
    }
  }
});
</script>

<style scoped>
.child-a {
  width: 100px;
  height: 100px;
  background: skyblue;
}

.child-b {
  width: 100px;
  height: 100px;
  background: plum;
}
</style>